<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="车型名称：">
            <el-input
              v-model="Truck.user"
              placeholder="请输入车型号码"
            ></el-input>
          </el-form-item>
          <el-form-item label="车型载重：">
            <el-input
              v-model="Truck.user"
              placeholder="请输入车型载重"
            ></el-input>
          </el-form-item>
          <el-form-item label="车型体积：">
            <el-input
              v-model="Truck.user"
              placeholder="请输入车型体积"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="cz">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <br />

    <el-dialog title="新增车型" :visible.sync="addTruck">
      <div style="text-align: left">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="*车型名称">
            <el-input
              style="margin-right: 50%"
              placeholder="请输入车型名称"
              v-model="AddTruck.stuphone"
            ></el-input>
          </el-form-item>
           <el-form-item label="车型载重">
            <el-input
              style="margin-right: 50%"
              placeholder="请输入车型载重"
              v-model="AddTruck.stuphone"
            >
            <template style="background-color: white" slot="append"
                >千克</template>
            </el-input>
          </el-form-item>
           <el-form-item label="车型体积">
            <el-input
              style="margin-right: 50%"
              placeholder="请输入车型体积"
              v-model="AddTruck.stuphone"
            >
            <template style="background-color: white" slot="append"
                >方</template>
            </el-input>
          </el-form-item>
           <el-form-item label="长">
            <el-input
              style="margin-right: 50%"
              placeholder="请输入长"
              v-model="AddTruck.stuphone"
            >
            <template style="background-color: white" slot="append"
                >米</template>
            </el-input>
          </el-form-item>
           <el-form-item label="宽">
            <el-input
              style="margin-right: 50%"
              placeholder="请输入宽"
              v-model="AddTruck.stuphone"
            >
            <template style="background-color: white" slot="append"
                >米</template>
            </el-input>
          </el-form-item>
           <el-form-item label="高">
            <el-input
              style="margin-right: 50%"
              placeholder="请输入高"
              v-model="AddTruck.stuphone"
            >
            <template style="background-color: white" slot="append"
                >米</template>
            </el-input>
          </el-form-item>
          <el-form-item label="货品类型">
            <el-select v-model="AddTruck.region" placeholder="请选择">
              <el-option
              v-for="(item, index) in goods"
                :key="index"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
         
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="qx">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑车型" :visible.sync="updateTruck">
      <div style="text-align: left">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="*车型名称">
            <el-input
              style="margin-right: 50%"
              placeholder="请输入车型名称"
              v-model="AddTruck.stuphone"
            ></el-input>
          </el-form-item>
           <el-form-item label="车型载重">
            <el-input
              style="margin-right: 50%"
              placeholder="请输入车型载重"
              v-model="AddTruck.stuphone"
            >
            <template style="background-color: white" slot="append"
                >千克</template>
            </el-input>
          </el-form-item>
           <el-form-item label="车型体积">
            <el-input
              style="margin-right: 50%"
              placeholder="请输入车型体积"
              v-model="AddTruck.stuphone"
            >
            <template style="background-color: white" slot="append"
                >方</template>
            </el-input>
          </el-form-item>
           <el-form-item label="长">
            <el-input
              style="margin-right: 50%"
              placeholder="请输入长"
              v-model="AddTruck.stuphone"
            >
            <template style="background-color: white" slot="append"
                >米</template>
            </el-input>
          </el-form-item>
           <el-form-item label="宽">
            <el-input
              style="margin-right: 50%"
              placeholder="请输入宽"
              v-model="AddTruck.stuphone"
            >
            <template style="background-color: white" slot="append"
                >米</template>
            </el-input>
          </el-form-item>
           <el-form-item label="高">
            <el-input
              style="margin-right: 50%"
              placeholder="请输入高"
              v-model="AddTruck.stuphone"
            >
            <template style="background-color: white" slot="append"
                >米</template>
            </el-input>
          </el-form-item>
          <el-form-item label="货品类型">
            <el-select v-model="AddTruck.region" placeholder="请选择">
              <el-option
              v-for="(item, index) in goods"
                :key="index"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
         
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="upqx">取 消</el-button>
        <el-button type="primary" @click="up">确 定</el-button>
      </div>
    </el-dialog>

    <el-card class="box-card">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-button style="margin-right: 90%" @click="Add" type="danger"
          >+新增车型</el-button
        >
      </el-form>
      <div>
        <el-table
          height="420px"
          :data="tableData"
          @selection-change="handleSelectionChange"
          tooltip-effect="dark"
        >
          <el-table-column prop="truckTypeId" label="序号" width="120"></el-table-column>
          <el-table-column prop="id" label="车型编号"></el-table-column>
          <el-table-column prop="name" label="车型名称"></el-table-column>
          <el-table-column
            prop="allowableLoad"
            label="车型载重(kg)"
          ></el-table-column>
          <el-table-column prop="allowableVolume" label="准载体积(方)"> </el-table-column>
          <el-table-column prop="measureLong" label="长(米)">
          </el-table-column>
          <el-table-column prop="measureWidth" label="宽(米)">
          </el-table-column>
          <el-table-column
            prop="measureHigh"
            label="高(米)"
          ></el-table-column>
          <el-table-column label="适用货品类型"  >
              <template slot-scope="tags">
                  <span :v-for="tag in tags.row.baseGoodsTypes"><el-tag>{{tag.name}}</el-tag></span>
              </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
                <el-link type="danger" @click="open">删除</el-link>|
              <!-- <el-link slot="reference" type="danger" @click="Del(scope.row.id)">删除</el-link>| -->
              <el-link type="primary" @click="update(scope.row)">编辑</el-link>
            </template>
          </el-table-column>
        </el-table>

        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 7, 10]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  BaseTruckTypeList,
  ShowPdGoodsType,
} from "@/api/wj/Vehicle";
export default {
  data() {
    return {
      tableData: [],
      formInline: {},
      visible:{},
      Truck: {},
      addTruck: false,
      updateTruck:false,
      AddTruck: {},
      currentPage4: 4,
      total: 10,
      page:{
        pageindex:1,
        pagenum:1
      },
      baseGoodsTypes:[],
      goods:{},
    };
  },
  methods: {
    handleSizeChange(val) {
      this.page.pagenum = val;
      console.log(`每页 ${val} 条`);
      this.pageinfo();
    },
    handleCurrentChange(val) {
      this.page.pageindex = val;
      console.log(`当前页: ${val}`);
      this.pageinfo();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(val);
    },
    onSubmit() {
      console.log(this.Truck);
    },
    cz() {
      this.Truck = {};
    },
    Add() {
      this.addTruck = true;
    },
    qx() {
      this.addTruck = false;
    },
    add() {
      this.$message({
        message: "添加成功",
        type: "success",
      });
      this.addTruck = false;
    },
    ShowDetails() {
      this.$router.push({ path: "/index/Vehicle/ShowDetails" });
      this.$message({
        message: "查看详情",
        type: "success",
      });
    },
    open() {
        this.$confirm('确定删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      update(){
        this.updateTruck=true;
      },
      upqx(){
          this.updateTruck = false;
      },
      up(){
        this.$message({
        message: "编辑成功",
        type: "success",
      });
      this.updateTruck = false;
      },
      pageinfo(){
        BaseTruckTypeList(this.page).then((data) => {
        console.log(data.data.list);
        this.baseGoodsTypes=data.data.list.baseGoodsTypes
        this.tableData = data.data.list;
        this.total = data.data.total;
      });
      },
      ShowGoodsType(){
        ShowPdGoodsType().then((data) => {
          console.log("assd",data.data)
          this.goods=data.data
      });
      }
   
  },
  created() {
    this.pageinfo();
    this.ShowGoodsType();
  },
};
</script>

<style>
/* .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  } */
</style>